<%# locals: (title: nil, headers: [], rows:, empty_state: nil, right_items: nil, footer: nil) %>

<div>
  <% if title || right_items %>
    <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
      <div class="min-w-0 flex-1">
        <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
          <%= title %>
        </h3>
      </div>
      <% if right_items %>
        <div class="mt-4 flex md:ml-4 md:mt-0">
          <%== allow_unescaped(right_items.join) %>
        </div>
      <% end %>
    </div>
  <% end %>

  <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
    <table class="min-w-full divide-y divide-gray-300">
      <% unless headers.empty? || rows.empty? %>
        <thead class="bg-gray-50">
          <tr>
            <% headers.each_with_index do |name, i| %>
              <th
                scope="col"
                <% if i == 0 %>
                class="pl-4 pr-3 sm:pl-6 py-3.5 text-left text-sm font-semibold text-gray-900"
                <% elsif i + 1 == headers.length %>
                class="pl-3 pr-4 sm:pr-6 py-3.5 text-left text-sm font-semibold text-gray-900"
                <% else %>
                class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                <% end %>
              >
                <%= name %>
              </th>
            <% end %>
          </tr>
        </thead>
      <% end %>
      <tbody class="divide-y divide-gray-200 bg-white">
        <% if rows.empty? %>
          <tr>
            <td colspan="<%= headers.length %>" class="text-center py-4 px-8 lg:px-32">
              <% if empty_state.is_a?(Hash) %>
                <%== part("components/empty_state", **empty_state) %>
              <% else %>
                <%== allow_unescaped(empty_state) %>
              <% end %>
            </td>
          </tr>
        <% else %>
          <% rows.each do |columns, row_opts| %>
            <% row_opts ||= {} %>
            <tr id="<%= row_opts[:id] %>">
              <% columns.each_with_index do |(value, col_opts), i| %>
                <% col_opts ||= {} %>
                <td
                  <% if i == 0
                      cls="pl-4 pr-3 sm:pl-6 py-4 text-gray-900 font-medium whitespace-nowrap text-sm"
                    elsif i + 1 == columns.length
                      cls="pl-3 pr-4 sm:pr-6 py-4 text-gray-500 whitespace-nowrap text-sm"
                    else
                      cls="px-3 py-4 text-gray-500 whitespace-nowrap text-sm"
                    end
                  %>
                  class="<%= cls %> <%= col_opts[:extra_class] %>"
                >
                  <% if value.is_a?(Array) %>
                    <% (first_value, first_opts), (second_value, second_opts) = value %>
                    <div class="font-medium text-gray-900">
                      <%== part("components/value_content", content: first_value, opts: first_opts) %>
                    </div>
                    <% if second_value %>
                      <div class="mt-1 text-gray-500 text-xs">
                        <%== part("components/value_content", content: second_value, opts: second_opts) %>
                      </div>
                    <% end %>
                  <% else %>
                    <%== part("components/value_content", content: value, opts: col_opts) %>
                  <% end %>
                </td>
              <% end %>
            </tr>
          <% end %>
        <% end %>
      </tbody>
    </table>
    <%== allow_unescaped(footer) %>
  </div>
</div>
